<template>
	<view class="deviceMovementList">
		<!-- 材料移库列表 -->
		<navBar title="材料移库清单" goBackUrl="/subpackage-materials/pages/materials/materialsInventory/inventoryMovement"
			@goBack="goBack"></navBar>
		<text class="del" @click="del">删除</text>
		<scroll-view scroll-y="true" class="scroll-box">
			<view class="info uniCollapse">
				<uni-collapse>
					<checkbox-group @change="checkboxChange">
						<uni-collapse-item v-for="(item,index) in tableData" title-border="show" :key="index"
							:title="item.name" :value="item.checkNum+''" v-if="item.open">
							<template v-slot:title>
								<view class="collapse-title">
									<view class="left">
										{{ item.name }}
									</view>
									<view class="right">
										{{ item.checkNum }}
									</view>
								</view>
							</template>
							<label v-for="(i,j) in item.list" :key='j'>
								<view class="center" v-if="i.openCheck">
									<view class="item">
										<view class="name">规格型号：</view>
										<view class="value">{{i.specificationModel}}</view>
									</view>
									<view class="item">
										<view class="name">过保日期：</view>
										<view class="value">{{i.time}}</view>
									</view>
									<view class="item">
										<view class="name">供应商：</view>
										<view class="value">{{i.supplier}}</view>
									</view>
									<view class="item">
										<view class="name">出库数量：</view>
										<view class="value">{{i.num}}吨</view>
									</view>
									<view class="item m40">
										<view class="name">归还数量：</view>
										<view class="value right">
											<u-number-box class="number" :min="1" :max="i.num" v-model="i.outNum"
												@change="curr=>comeNumChange(curr,j,index)"
												color="#323233"></u-number-box>
											<text class="unit">吨</text>
										</view>
									</view>
									<checkbox :value="i.index" :checked="i.delCheck" class="checkbox color round" />
								</view>
							</label>
						</uni-collapse-item>
					</checkbox-group>
				</uni-collapse>
			</view>
		</scroll-view>


		<view class="buttonAll">
			<u-button type="primary" @click="submit" :loading="loading" text="保存"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from "vuex"
	import uniCollapse from "../../components/uni-collapse/components/uni-collapse/uni-collapse.vue";
	export default {
		data() {
			return {
				loading: false,
				tableData: [],
				checkNum: 0,
				checkIndex: []
			}
		},
		components: {
			uniCollapse
		},
		computed: {
			...mapState('materials', ['inventoryMovementCheckList'])
		},
		mounted() {
			this.init()
		},
		methods: {
			...mapMutations('materials', ["setInventoryMovementCheckList"]),
			init() {
				this.tableData = this.inventoryMovementCheckList
			},
			comeNumChange(curr, j, index) {
				this.tableData[index].list[j].outNum = curr.value
			},
			checkboxChange(e) {
				this.checkNum = e.detail.value.length
				this.checkIndex = e.detail.value
				this.tableData.forEach(item => {
					item.list.forEach(i => {
						if (this.checkIndex.indexOf(i.index) !== -1) {
							i.delCheck = true
						} else {
							i.delCheck = false
						}
					})
				})
				console.log(this.tableData)
			},
			submit() {
				this.setInventoryMovementCheckList(this.tableData)
				uni.navigateBack()
			},
			del() {
				let _data = this.tableData
				this.tableData = []
				_data.forEach(item => {
					item.list.forEach(i => {
						if (i.delCheck) {
							i.check = false
							i.openCheck = false
							i.outNum = 1
						}
					})
				})
				_data.forEach(item => {
					let j = 0
					item.open = false
					item.checkNum = 0
					item.list.forEach(i => {
						if (i.check) {
							j++
						}
					})
					if (j > 0) {
						item.open = true
						item.checkNum = j
					}
				})
				this.tableData = _data
				console.log(this.tableData)
			},
			// 返回上一级
			goBack(url) {
				uni.redirectTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.deviceMovementList {
		padding-bottom: 160rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		background-color: #F5F7FA;
		height: calc(100vh - 190rpx);
		position: relative;
		/* #ifdef MP-WEIXIN */
		padding-top: 180rpx;

		/* #endif */
		.del {
			position: absolute;
			top: 42rpx;
			right: 50rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FF6A6A;
		}

		.scroll-box {
			max-height: calc(100vh - 335rpx);
			padding-top: 10rpx;
		}

		.content {
			background-color: #F5F7FA;
			padding: 24rpx 32rpx;
		}

		.info {
			padding: 24rpx 32rpx;

			.center {
				position: relative;
				background-color: #FFFFFF;
				padding: 32rpx 38rpx;
				padding-top: 12rpx;
				border-bottom: 2rpx solid #E2E5ED;

				.item {
					display: flex;
					margin-top: 20rpx;

					.name {
						width: 150rpx;
					}

					.value {
						flex: 1;
					}

					.right {
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}

					.unit {
						margin-left: 10rpx;
					}
				}

				.checkbox {
					position: absolute;
					top: 26rpx;
					right: 26rpx;
				}
			}
		}

		.buttonAll {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #FFFFFF;

			.all {
				padding: 0rpx 50rpx;
				display: flex;
				justify-content: space-between;
				height: 80rpx;
				line-height: 80rpx;
				color: #445469;
				font-size: 32rpx;
				font-weight: 500;
			}
		}
	}
</style>